<script>

import { FormItem } from 'element-ui'

const { props: FormItemProps } = FormItem

export default {
  props: {
    formParams: {
      type: Object,
      default: () => ({})
    },
    htmlType: {
      type: String,
      default: () => 'input'
    },
    item: {
      type: Object,
      default: () => ({})
    }
  },
  render (h) {
    const { on, nativeOn, name, calss: className, style, ...props } = this.item
    // this.propsAll = props
    const { ItemProps, childrenProps } = Object.entries(props).reduce((prev, [key, val]) => {
      if (FormItemProps[key]) {
        prev.ItemProps[key] = val
      } else {
        prev.childrenProps[key] = val
      }
      return prev
    },
    {
      ItemProps: {},
      childrenProps: {}
    }
    )
    return (
      this.htmlType === 'alert'
        ? <el-alert
          style={style}
          {...{ props: { type: 'success', ...props }, on, nativeOn }}
        >
          <span>{props.label}</span>
          <span><i class="el-icon-arrow-down" style={{ transform: `rotate(${!this.formParams[name] ? -180 : 0}deg)`, transition: 'transform 0.3s' }}></i></span>
        </el-alert>
        : <el-form-item style={style} calss= {className} {... { props: { ...ItemProps, prop: name } }} >
          {
            this.dhFormItem(this.htmlType) && this.dhFormItem(this.htmlType, childrenProps, on).createHtml(name)
          }
        </el-form-item>
    )
  },
  methods: {
    dhFormItem (htmlType, props, on) {
      const { maxlength = undefined, placeholder = undefined, ...prop } = props || {}
      const PropsOrEvent = {
        props: { ...prop },
        attrs: { maxlength, placeholder },
        on
      }
      const FormItem = [
        {
          name: 'input',
          createHtml: (name) => {
            return <el-input
              {...PropsOrEvent}
              vModel={this.formParams[name]}
            >
              {PropsOrEvent.props.prepend && <template slot="prepend">{PropsOrEvent.props.prepend}</template>}
              {PropsOrEvent.props.append && <template slot="append">{PropsOrEvent.props.append}</template>}
            </el-input>
          }
        },
        // 日期
        {
          name: 'date',
          createHtml: (name) => {
            return <el-date-picker
              {...{ props: { ...props }, on }}
              vModel={this.formParams[name]}
            ></el-date-picker>
          }
        },
        // 单选按钮
        {
          name: 'radio',
          createHtml: (name) => {
            return <el-radio-group
              {...PropsOrEvent}
              vModel={this.formParams[name]}
            ></el-radio-group>
          }
        },
        // 多选按钮
        {
          name: 'checkbox',
          createHtml: (name) => {
            return <el-checkbox-group
              {...PropsOrEvent}
              vModel={this.formParams[name]}
            ></el-checkbox-group>
          }
        },
        // 计数器
        {
          name: 'inputnumber',
          createHtml: (name) => {
            return <el-input-number
              {...PropsOrEvent}
              vModel={this.formParams[name]}
            ></el-input-number>
          }
        },
        // 下拉框
        {
          name: 'select',
          createHtml: (name) => {
            return <el-select
              {...PropsOrEvent}
              vModel={this.formParams[name]}
            >
              {this.childrenItem(this.htmlType) && this.childrenItem(this.htmlType).createHtml(props.options)}
            </el-select>
          }
        },
        // switch
        {
          name: 'switch',
          createHtml: (name) => {
            return <el-switch
              {...PropsOrEvent}
              vModel={this.formParams[name]}
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          }
        }

      ]
      return FormItem.find((item) => item.name === htmlType)
    },
    childrenItem (htmlType) {
      const FormChildrenItem = [
        {
          name: 'select',
          createHtml: (options) => options.map((obj) => (
            <el-option
              key={obj.value}
              label={obj.label}
              value={obj.value}>
            </el-option>
          ))
        }
      ]
      return FormChildrenItem.find((item) => item.name === htmlType)
    }
    // eventOn(htmlType){
    //   if('input')
    // }
  }
}
</script>

<style lang='scss' scoped>
 .el-alert {
  ::v-deep .el-alert__content {
    width: 100%;
    .el-alert__description {
       display: flex;
       justify-content: space-between;
       font-size: 18px;
    }
  }
}
</style>
